<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./font_4765172_os1q3nbeptk/iconfont.js"></script>
    <link rel="stylesheet" href="./css/history.css"> 
    <title>历史记录</title>
</head>
<body>
    <div class="zcy22001030403-bili-header">
      <div class="zcy22001030403-bili-header__bar" >
          <ul class="zcy22001030403-left-entry">
              <li >
                  <a href="index.html" class="zcy22001030403-entry-title">
                      <svg class="zcy22001030403-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 18 18">
                          <use xlink:href="#icon-dsj"></use>
                      </svg>                          
                      <span>首页</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  <a href="" class="zcy22001030403-default-entry">
                      <span>番剧</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  <a href="" class="zcy22001030403-default-entry">
                      <span>直播</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  <a href="" class="zcy22001030403-default-entry">
                      <span>游戏中心</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  <a href="platform.html" class="zcy22001030403-default-entry">
                      <span>会员购</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  
                  <a href="" class="zcy22001030403-default-entry">
                      <span>漫画</span>
                  </a>
              </li>
              <li class="zcy22001030403-popover-wrap">
                  <a href="" class="zcy22001030403-default-entry">
                      <span>赛事</span>
                  </a>
              </li>
              <li >
                  <a href="" class="download-entry download-client-trigger">  
                      <svg class="zcy22001030403-icon" aria-hidden="true">
                          <use xlink:href="#icon-xiazai3"></use>
                        </svg>   
                      <span>下载客户端</span>
                  </a>
              </li>
          </ul>
          <div class="zcy22001030403-center-search-container">
                  <div class="zcy22001030403-nav-searchform">
                      <div class="zcy22001030403-nav-search-content">
                          <input type="text" placeholder="一人一句许哥牛逼" />
                      </div>
                      <div class="zcy22001030403-nav-search-btn">
                          <svg class="icon-searchBtn" aria-hidden="true">
                              <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-02"></use>
                          </svg>      
                      </div>
                  </div>    
          </div>
          <ul class="zcy22001030403-right-entry">
              <div class="zcy22001030403-user-left">
                  <div class="zcy22001030403-carmer">
                    <img
                      src="./img/index/seele.jpg"
                      width="36px"
                      height="36px"
                      alt=""
                    />
                  </div>
              </div>
              <div class="zcy22001030403-user-mid">
                  <a href="#" class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true">
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-06-06"></use>
                          
                      </svg>
                      <span>大会员</span>
                  </a>
                  <a href="" class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true">
                          <use xlink:href="#icon-xiaoxi3"></use>
                      </svg>
                      <span>消息</span>
                  </a>
                  <a href="" class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true" >
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-03"></use>
                      </svg>
                      <span>动态</span>
                  </a>
                  <a href="" class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true" >
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-04 "></use>
                      </svg>
                      <span>收藏</span>
                  </a>
                  <a href="history.html" class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true" >
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-07"></use>
                      </svg>
                      <span> 历史</span>
                      </a>
                  <a href=""class="user-ui">
                      <svg class="zcy22001030403-icon zcy22001030403-popover-wrap" aria-hidden="true"  >
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-05"></use>
                      </svg>
                      <span> 创作中心</span>
                      </a>
                  
              </div>
              <div class="zcy22001030403-user-right">
                  <div class="zcy22001030403-userDetail">
                      <a href="javascript:;" style="color: white">
                      <svg class="zcy22001030403-icondown" aria-hidden="true">
                          <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-09"></use>
                      </svg>
                      <span>投稿</span>
                      </a>
                  </div>
              </div>
          </ul>
      </div>
      <div class="zcy22001030403-bili-header__banner">
          <div><img src="./img/index/10001.png"></div>
          <div><img src="./img/index/10002.png"></div>
          <div><img src="./img/index/10003.png"></div>
          <div><img src="./img/index/10004.png"></div>
          <div><img src="./img/index/10005.png"></div>
          <div><img src="./img/index/10006.png"></div>
      </div>
    </div>
    <div class="zcy22001030403-history-wrap">
        <div class="zcy22001030403-history-header">
            <div class="zcy22001030403-history-title">历史记录</div>
            <div class="zcy22001030403-history-tools">
                <input type="text" class="zcy22001030403-search-bar" placeholder="搜索历史记录" />
                <button class="pause-history">暂停记录历史</button>
                <button class="clear-history">清空历史</button>
            </div>
        </div>
        <div class="zcy22001030403-history-container">
            <div class="zcy22001030403-floating-menu">
                今天
            </div>
            <div class="zcy22001030403-history-list"></div>
        </div>
    </div>
    <div class="zcy22001030403-footer">
        <div class="zcy22001030403-end-wrapepr">
          <div class="zcy22001030403-end-header">
            <div style="border-right: 1px solid #eeeeee; margin-right: 35px">
              <h2 class="zcy22001030403-end-title">bilibili</h2>
              <ul class="zcy22001030403-aboutSection">
                <li>关于我们</li>
                <li>友情链接</li>
                <li>联系我们</li>
                <li>隐私政策</li>
                <li>用户协议</li>
                <li>bilibili认证</li>
                <li>加入我们</li>
                <li>investor Relation</li>
              </ul>
            </div>
            <div style="border-right: 1px solid #eeeeee; width: 45%">
              <h2 class="zcy22001030403-end-title">传送门</h2>
              <ul class="zcy22001030403-aboutSection zcy22001030403-s-2">
                <li>协议汇总</li>
                <li>帮助中心</li>
                <li>名人堂</li>
                <li>活动中心</li>
                <li>用户反馈论坛</li>
                <li>MCN管理中心</li>
                <li>活动专题页</li>
                <li>壁纸站</li>
                <li>高级弹幕</li>
                <li>侵权申诉</li>
                <li>广告合作</li>
                <li>企业号官网</li>
              </ul>
            </div>
            <div class="zcy22001030403-downloadWrapper">
              <ul class="zcy22001030403-download">
                <li class="zcy22001030403-download-app">
                  <div class="zcy22001030403-dicon-wrapper">
                    <svg class="zcy22001030403-dicon" aria-hidden="true">
                      <use xlink:href="#icon-xiazai"></use>
                    </svg>
                  </div>
                  <p>下载APP</p>
                </li>
                <li class="zcy22001030403-sina-weibo">
                  <div class="zcy22001030403-dicon-wrapper">
                    <svg class="zcy22001030403-dicon" aria-hidden="true">
                      <use xlink:href="#icon-xinlangweibo"></use>
                    </svg>
                  </div>
                  <p>新浪微博</p>
                </li>
                <li class="zcy22001030403-weixin">
                  <div class="zcy22001030403-dicon-wrapper">
                    <svg class="zcy22001030403-dicon" aria-hidden="true">
                      <use xlink:href="#icon-weixin15"></use>
                    </svg>
                  </div>
                  <p>官方微信</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
<script>
    const bimages = document.querySelectorAll('.zcy22001030403-bili-header__banner > div > img');  // 更新选择器

    document.querySelector('.zcy22001030403-bili-header__banner').addEventListener('mousemove', (e) => {
    let percentage = e.clientX / window.outerWidth;
    let offset = 10 * percentage;
    let blur = 20;

    for (let [index, image] of bimages.entries()) {
        offset *= 1.3;
        
        let blurValue = (Math.pow((index / bimages.length - percentage), 2) * blur);
        
        image.style.setProperty('--offset', `${offset}px`);
        image.style.setProperty('--blur', `${blurValue}px`);
    }
    });
    const titles = document.querySelectorAll('.title');

    const historyData = [
        {
            time: '23:20',
            videoThumb: './img/history/10001.webp',  // videoThumb 从 1 开始递增
            title: '未开播先狂喷！给这烂作动画化！日本人指定是疯了！2025年一月新番导视#2',
            progress: '未看完',
            avatar: './img/history/10002.webp',  // avatar 为双数编号
            username: '政宗君de情敌',
            name: '动漫杂谈'
        },
        {
            time: '22:00',
            videoThumb: './img/history/10003.webp',
            title: '丽塔进不去火星系统，只能靠照片解馋',
            progress: '已看完',
            avatar: './img/history/10004.webp',
            username: '老板娘雷电芽衣',
            name: '手机游戏'
        },
        {
            time: '21:10',
            videoThumb: './img/history/10005.webp',
            title: '全球第一个打出小小英雄彩蛋局的巧合',
            progress: '未看完',
            avatar: './img/history/10006.webp',
            username: '名字不要想我一样长',
            name: '手机游戏'
        },
        {
            time: '20:45',
            videoThumb: './img/history/10007.webp',
            title: '两个三星六费翻车!',
            progress: '已看完',
            avatar: './img/history/10008.webp',
            username: '白菜炖香蕉',
            name: '电子竞技'
        },
        {
            time: '19:30',
            videoThumb: './img/history/10009.webp',
            title: '当我让女朋友拿硬辅时……',
            progress: '未看完',
            avatar: './img/history/10010.webp',
            username: '小埋阿姨',
            name: '网络游戏'
        },
        {
            time: '18:15',
            videoThumb: './img/history/10011.webp',
            title: '以为只是个中二故事，结果被真相给惊到了！《胶囊计划》今...',
            progress: '已看完',
            avatar: './img/history/10012.webp',
            username: '安迪视频',
            name: '动漫杂谈'
        },
        {
            time: '17:00',
            videoThumb: './img/history/10013.webp',
            title: '【电锯人187话】呕吐逆转战局？',
            progress: '未看完',
            avatar: './img/history/10014.webp',
            username: '话漫人儿',
            name: '动漫杂谈'
        },
        {
            time: '16:25',
            videoThumb: './img/history/10015.webp',
            title: '无敌千珏大王！',
            progress: '已看完',
            avatar: './img/history/10016.webp',
            username: '小柳梢z',
            name: '英雄联盟'
        }
    ];

    function createHistoryHTML(record) {
        return `
            <div class="zcy22001030403-record-item">
                <div class="time-line"></div>
                <div class="time">${record.time}</div>
                <div class="zcy22001030403-right-content ">
                    <img src="${record.videoThumb}" alt="视频封面" class="zcy22001030403-video-thumb">
                    <div class="zcy22001030403-text-content">
                        <div class="title">${record.title}</div>
                        <div class="zcy22001030403-null"></div>
                        <div class="zcy22001030403-sub-info">
                            <span class="progress">${record.progress}</span>
                            <div class="zcy22001030403-info-line">
                                <img src="${record.avatar}" alt="博主头像" class="avatar">
                                <span class="username">${record.username}</span>
                                <span class="name">${record.name}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    const historyWrapper = document.querySelector(".zcy22001030403-history-list");

    historyData.forEach(record => {
        historyWrapper.innerHTML += createHistoryHTML(record);
    });

    titles.forEach(title => {
        title.addEventListener('mouseover', function() {
            title.classList.add('hover-blue');
        });

        title.addEventListener('mouseout', function() {
            title.classList.remove('hover-blue');
        });
    });
   
    

</script>
    
</body>
</html>